<template>
	<!-- 我的/设置页 -->
	<view class="set">
		<u-cell-group :border="false">
			<u-cell v-for="(item, index) in setList" :key="index" :title="item.name" :value="item.value" isLink
				size="large" :border="false" @click="goPage(item.url)">
			</u-cell>
		</u-cell-group>

		<!-- 底部操作 -->
		<view class="wrap-bottom-bar">
			<view class="bar-placeholder"></view>
			<view class="bar-content">
				<u-button :customStyle="btnStyle" :ripple="true" shape="circle" @click="goPage('logout')">退出</u-button>
			</view>
		</view>

		<!-- 退出 -->
		<u-modal title="提示" @cancel="logoutShow = false" showCancelButton :show="logoutShow" @confirm="logout"
			ref="uModal" :asyncClose="true" content="您是否确定要，退出登录?"></u-modal>

		<!-- 注销 -->
		<u-modal title="提示" @cancel="cancleShow = false" showCancelButton :show="cancleShow" @confirm="deleteAccount"
			ref="uModal" :asyncClose="true" content="您是否确定要，注销账号?"></u-modal>
	</view>
</template>

<script>
import { UserApi } from '@/api/index.js';
import websocket from '@/utils/websocket/socket';
import websocketMixin from '@/utils/mixins/websocketMixin';

export default {
	mixins: [websocketMixin],
	data() {
		return {
			logoutShow: false,
			cancleShow: false,
			// 设置列表（已移除：绑定邮箱、意见反馈、关于社区）
			setList: [
				{
					name: '账号与安全',
					url: 'edit-pwd'
				},
				{
					name: '修改资料',
					url: 'edit-info'
				},
				{
					name: '清除缓存',
					url: 'clear'
				},
				{
					name: '注销账号',
					url: 'cancle'
				}
			],
			// 按钮配置
			btnStyle: {
				width: "90%",
				height: "75rpx",
				background: "linear-gradient(-45deg,#01906c,#34D399)",
				color: "#FFFFFF",
				fontSize: "30rpx"
			}
		};
	},
	onLoad() {
		this.getStorage();
	},
	methods: {
		goPage(url) {
			if (url === 'cancle') return this.cancleShow = true; // 注销
			if (url === 'logout') return this.logoutShow = true; // 退出
			if (url === 'clear') return this.clearStorage(); // 清除缓存
			this.$u.route('/pages/mine/' + url);
		},
		// 退出
		logout() {
			this.logoutShow = false;
			UserApi.logout();

			// 清除全局数据
			const app = getApp();
			app.globalData.userId = null;

			// 清除本地存储
			uni.removeStorageSync('userId');
			uni.removeStorageSync('token');

			// 关闭 WebSocket
			websocket.closeSocket();
			this.$u.route('/pages/mine/login');
		},
		// 注销账号
		async deleteAccount() {
		  uni.showLoading({ title: '注销中...' });
		
		  try {
		    const userId = getApp().globalData.userId; // 获取当前用户 ID
		    if (!userId) {
		      uni.showToast({ title: '用户信息异常', icon: 'none' });
		      return;
		    }
		
		    // 调用删除接口
		    const res = await UserApi.deleteUserInfo(userId);
		
		    uni.hideLoading();
		
		    if (res && res.code === 200) {
		      uni.showToast({
		        title: '注销成功',
		        icon: 'success',
		        success: () => {
		          // 清理全局数据
		          const app = getApp();
		          app.globalData.userId = null;
		
		          // 清除本地存储
		          uni.removeStorageSync('userId');
		          uni.removeStorageSync('token');
		
		          // 关闭 WebSocket
		          websocket.closeSocket();
		
		          // 跳转回登录页
		          setTimeout(() => {
		            this.$u.route('/pages/mine/login');
		          }, 1000);
		        }
		      });
		    } else {
		      uni.showToast({ title: res.msg || '注销失败', icon: 'none' });
		    }
		  } catch (e) {
		    uni.hideLoading();
		    console.error("注销账户出错", e);
		    uni.showToast({ title: '网络异常，请重试', icon: 'none' });
		  }
		},
		// 清除缓存
		clearStorage() {
			const _this = this;
			uni.showModal({
				title: '提示',
				content: '是否要清除所有缓存？',
				cancelText: '不清除',
				confirmText: '清除',
				success(res) {
					if (res.confirm) {
						uni.clearStorage();
						_this.getStorage();
						_this.$u.toast('清除成功');
					}
				}
			});
		},
		// 获取缓存
		getStorage() {
			const _this = this;
			uni.getStorageInfo({
				success: function (res) {
					// 当前占用的空间大小，单位 KB
					const value = res.currentSize;
					const val = value > 1024 ? (value / 1024).toFixed(2) + 'MB' : value.toFixed(2) + 'KB';
					_this.$set(_this.setList[2], 'value', val); // 更新“清除缓存”项的值
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.set {}
</style>